import React from "react";
import { Button, Col, message, Row } from "antd";
import styles from "@/pages/Account/accessSettings/siteAccess.css";
import { formatMessage } from 'umi-plugin-react/locale';

class TopInfo extends React.Component {
	/**
	 * 复制代码
	 */
	copy = (type) => {
		let text = "";

		switch (type) {
			case "jsAccess":
				text = document.getElementById("jsAccess");
				break;
			case "siteAccess":
				text = document.getElementById("siteAccess");
				break;
			case "robotId":
				text = document.getElementById("robotId");
				break;
		};
		if (document.body.createTextRange) {
			var range = document.body.createTextRange();
			range.moveToElementText(text);
			range.select();
		} else if (window.getSelection) {
			let selection = window.getSelection();
			let range = document.createRange();
			range.selectNodeContents(text);
			selection.removeAllRanges();
			selection.addRange(range);
		};
		document.execCommand("Copy");
		message.success(formatMessage({ id: 'topInfo.copySuccess' }));
	};

	open = (type) => {
		let text = document.getElementById(type).innerText;
		window.open(text);
	};

	render() {
		const { robotId, applicationId } = this.props;
		return (
			<div>
        <Row>
					<Col>
						<span className={styles.titlep}>
							<span>{formatMessage({ id: 'topInfo.jsAccessTitle' })}</span>
						</span>
						<div className={styles.tips}>{formatMessage({ id: 'topInfo.jsAccessTips' })}</div>
						<div className={styles.codeBox}>
							<div className={styles.code} id="jsAccess">
								{`<script src="${customBaseUrl}/static/js/sdk.js" data-applicationId="${applicationId}" id="qizhiChatScript"></script>`}
							</div>
							<Button size='small' onClick={() => this.copy("jsAccess")} className={styles.copyButton}>{formatMessage({ id: 'common.copy' })}</Button>
						</div>
					</Col>
				</Row>
				<Row style={{ marginTop: 30 }}>
					<Col>
						<span className={styles.titlep}>
							<span>{formatMessage({ id: 'topInfo.siteAccessTitle' })}</span>
						</span>
						<div className={styles.tips}>{formatMessage({ id: 'topInfo.siteAccessTips' })}</div>
						<div className={styles.codeBox}>
							<div className={styles.code} id="siteAccess">
								{customBaseUrl}/dialog?applicationId={applicationId}
							</div>
							<Button size='small' onClick={() => this.open("siteAccess")} className={styles.copyButton}>{formatMessage({ id: 'common.open' })}</Button>
							<Button size='small' onClick={() => this.copy("siteAccess")} className={styles.copyButton}>{formatMessage({ id: 'common.copy' })}</Button>
						</div>
						{/* <div style={{ lineHeight: '25px' }}>
							{formatMessage({ id: 'topInfo.userInfoTips' })}
							<a href='#' style={{ marginLeft: 10 }}>{formatMessage({ id: 'topInfo.userManualLink' })}</a>
						</div> */}
					</Col>
				</Row>
			</div>
		);
	}
}
export default TopInfo;
